import React from 'react';
import {Card,Button,notification} from 'antd';
import './ui.less';

export default class Notice extends React.Component{
  
  openNotification=(type,direction)=>{
    if(direction){
      notification.config({
        placement:direction
      })
    }
    notification[type]({
      message:'标题',
      description:'这是一个弹出消息的内容'
    })
  }

  render(){
    return (
      <div>
        <Card title="通知提醒框" className="card_wrapper">
          <Button type="primary" onClick={()=>this.openNotification('success')}>Success</Button>
          <Button type="primary" onClick={()=>this.openNotification('info')}>Info</Button>
          <Button type="primary" onClick={()=>this.openNotification('warning')}>warning</Button>
          <Button type="primary" onClick={()=>this.openNotification('error')}>error</Button>
        </Card>
        <Card title="通知提醒框位置变化" className="card_wrapper">
          <Button type="primary" onClick={()=>this.openNotification('success','topLeft')}>topLeft</Button>
          <Button type="primary" onClick={()=>this.openNotification('info','topRight')}>topRight</Button>
          <Button type="primary" onClick={()=>this.openNotification('warning','bottomLeft')}>bottomLeft</Button>
          <Button type="primary" onClick={()=>this.openNotification('error','bottomRight')}>bottomRight</Button>
        </Card>
      </div>
    )
  }
}